<template>
  <div class="type-container">
    <div class="type-main">
      <ul>
        <li v-for="item in typeBarList" :key="item.typeId">
        <router-link :to="{
                  path: '/typeList',
                  query: { typeId: item.typeId, typeName: item.typeName },
                }"
                :key="item.typeId">
            <div><img :src="item.typeImage" /></div>
          <h3>{{item.typeName}}</h3>
          <p>{{item.typeDes}}</p>
          <hr />
          <div class="type-time">
            <i class="iconfont">&#xe64d;</i>{{item.createTime | formatDate}}

            <span class="type-add"><i class="iconfont ">&#xe60d;</i>{{item.articleNum}}</span>
          </div>
        </router-link>
        </li>
       
      </ul>
      
    </div>
  </div>
</template>

<script>
import "@/assets/css/type.css";
import{ getTypeList } from "@/api/type";
import{ formatDate } from "@/utils/date";
export default {
  name: "type",
  data() {
    return{
      typeBarList:[]
    }
  },
  created() {
    this.getTypeListFun();
  },
   // 创建一个过滤器
  filters: {
    formatDate(time) {
      if (time == null || time === "") {
        return "N/A";
      }
      let date = new Date(time);
      return formatDate(date, "yyyy-MM-dd");
    },
  },
  methods: {
    getTypeListFun(){
      getTypeList().then((response) => {
        this.typeBarList = response.data;
      })
    }
  },
};
</script>

<style scoped></style>
